<template>
  <div class="register-container">
    <h1>注册</h1>
    <el-form  :rules="rules" ref="registerForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="password"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="password">
        <el-input type="password" v-model="comfirmpassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">注册</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import axios from "axios";
import {LOGINURL} from "@/assets/js/HrefLocation";

export default {
  data() {
    // 验证规则
    return {

        username: '',
        password: '',
        comfirmpassword:''

      // rules: {
      //   username: [
      //     { required: true, message: '请输入用户名', trigger: 'blur' }
      //   ],
      //
      //   password: [
      //     { required: true, message: '请输入密码', trigger: 'blur' },
      //     { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      //   ]
      // }
    };
  },
  methods: {
    submitForm() {
      if(this.username===''||this.password===''||this.comfirmpassword===''){
        this.$alert("请完整填写！","错误",{
          showClose:false
        })
        return false;
      }
      if(this.password!==this.comfirmpassword){
        this.$alert("两次密码不一致！","错误",{
          showClose:false
        })
        return false;
      }
      axios.post("/hkgapi/user/register",{
        userName:this.username,
        userPsd:this.password
      }).then(res=>{
        this.$alert(res.data.message,"提示",{
          showClose:false
        }).then(()=>{
          if(res.data.code===0){
            location.href=LOGINURL;
          }
        })

      })

    },
    resetForm() {
      this.username=""
      this.password=""
      this.comfirmpassword=""
    }
  }
};
</script>

<style scoped>
.register-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>